<template>
  <div>
    <el-menu :router="true" default-active="chat" class="el-menu-vertical-demo" background-color="#303841"
      text-color="#fff" active-text-color="#38d39f">
      <div class="avaItem">
        <img src="@/assets/img/user/ava.jpg" alt="" class="ava">
      </div>
      <el-menu-item index="chat">
        <i class="iconfont icon-chat"></i>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="iconfont icon-user"></i>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="iconfont icon-users"></i>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="iconfont icon-shoucang"></i>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="iconfont icon-shezhi"></i>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "leftnav"
}
</script>

<style lang='less' scoped>
.el-menu {
  height: 100vh;
  .avaItem {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 0;
    .ava {
        width: 40px;
        border-radius: 50%;
      }
  }
}
</style>